.icon {
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
 }

 /* 导航栏样式 */
.nav {
    background-color: #00a2ae; /* 青色背景 */
    text-align: center; /* 居中对齐 */
    padding: 10px 0; /* 上下内边距 */
}

.nav-list {
    list-style: none; /* 去掉默认的列表样式 */
    margin: 0;
    padding: 0;
    display: flex; /* 使用Flex布局 */
    justify-content: center; /* 子元素居中 */
    flex-wrap: wrap; /* 自动换行 */
}

.nav-list li {
    margin: 0 15px; /* 每个导航项的间距 */
}

.nav-list a {
    text-decoration: none; /* 去掉超链接下划线 */
    color: #fff; /* 白色文字 */
    font-size: 14px; /* 字体大小 */
    transition: color 0.3s; /* 添加鼠标悬停过渡效果 */
}

.nav-list a:hover {
    color: #ffcc00; /* 鼠标悬停时文字变为黄色 */
}

/* 底部导航栏 */

/* 整体布局 */
.footer {
    background-color: #444; /* 底部背景颜色 */
    padding: 20px 0; /* 上下内边距 */
    text-align: center; /* 居中对齐 */
    font-family: Arial, sans-serif; /* 设置字体 */
  }
  
  /* 底部导航栏样式 */
  .footer-nav {
    display: flex;
    justify-content: center; /* 居中排列 */
    flex-wrap: wrap; /* 自动换行 */
    gap: 15px; /* 每个导航项之间的间距 */
    margin-bottom: 20px; /* 导航栏与盒子之间的间距 */
  }
  
  .footer-nav a {
    color: #aaa; /* 链接文字颜色 */
    text-decoration: none; /* 去掉下划线 */
    font-size: 14px; /* 字体大小 */
    margin-left: 10px;
    margin-right: 10px;
  }
  
  .footer-nav a:hover {
    color: #007bff; /* 鼠标悬浮时的颜色 */
  }
  
  /* 一行三列盒子样式 */
  .footer-boxes {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }
  
  .boxfooter {
    width: 30%; /* 每个盒子的宽度 */
    text-align: left; /* 左对齐 */
    padding-left: 90px;
  }
  
  .boxfooter p {
    margin: 5px 0; /* 两段文字之间的间距 */
    font-size: 14px; /* 字体大小 */
    color: #bbb; /* 文字颜色 */
  }
  
  /* 竖线样式 */
  .vertical-line {
    width: 1px; /* 竖线的宽度 */
    height: 50px; /* 竖线的高度 */
    background-color: #ccc; /* 灰色竖线 */
    margin: 0 10px; /* 竖线与盒子的间距 */
  }